<template>
  <div class="route">
    <div class="route" v-if="type==0">
      <div class="item" @click="addRoute(item.entity.id)" v-for="(item,index) in routes" :key="index">
        <div class="name">线路</div>
        <div class="con">
          <span class="title">{{ item.entity.name }}</span>
          <span class="remark">{{ item.entity.remark }}</span>
        </div>
        <div class="right">
          <span class="iconfont iconarrow_right"></span>
        </div>
      </div>
    </div>
    <div class="route" v-if="type==1" >
      <div class="item" @click="editShop(item.id)" v-for="(item,index) in shops" :key="index">
        <div class="name">药店</div>
        <div class="con">
          <span class="title">{{ item.shopName }}</span>
          <span class="remark">{{ item.province }}{{ item.city }}{{ item.county }}{{ item.detail }}</span>
        </div>
        <div class="right">
          <span class="iconfont iconarrow_right"></span>
        </div>
      </div>
    </div>
    <div class="route" v-if="type==2">
      <div class="item" @click="editSchool(item.id)" v-for="(item,index) in schools" :key="index">
        <div class="name">学校</div>
        <div class="con">
          <span class="title">{{ item.name }}</span>
          <span class="remark">{{ item.province }}{{ item.city }}{{ item.county }}{{ item.detail }}</span>
        </div>
        <div class="right">
          <span class="iconfont iconarrow_right"></span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="add btn" v-if="type==0"  @click="addRoute()">添加路线</div>
      <div class="shop btn" v-if="type==1" @click="toShop">分配药店</div>
      <div class="school btn" v-if="type==2" @click="toSchool">分配学校</div>
    </div>
  </div>
</template>

<script>
import { listRoute } from '@/api/route'
import { listSchool } from '@/api/school'
import { listShop } from '@/api/shop'

export default {
  data () {
    return {
      type: 0,
      routes: null,
      shops: null,
      schools: null
    }
  },
  methods: {
    editSchool (id) {
      this.$router.push({
        path: '/school/edit',
        query: {
          id: id
        }
      })
    },
    editShop (id) {
      this.$router.push({
        path: '/shop/edit',
        query: {
          id: id
        }
      })
    },
    addRoute (id) {
      this.$router.push({
        path: '/route/add',
        query: {
          id: id
        }
      })
    },
    toShop () {
      this.$router.push({
        path: '/route/shop'
      })
    },
    toSchool () {
      this.$router.push({
        path: '/route/school'
      })
    }
  },
  created () {
    this.type = this.$route.query.type | 0
    listRoute().then(res => {
      this.routes = res.data
    })
    listShop().then(res => {
      this.shops = res.data
    })
    listSchool().then(res => {
      this.schools = res.data
    })
  }
}
</script>

<style scoped lang="stylus">
.route
  padding 20px 10px
  .item
    background: #FFFFFF;
    height: 75px;
    background: #FFFFFF;
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    border-radius: 10px;
    display flex
    justify-content space-between
    padding 0 10px
    margin-bottom 15px
    align-items center
    .name
      width: 38px;
      height: 38px;
      background: #F9A528;
      border-radius: 50%;
      color white
      display flex
      align-items center
      justify-content center
      font-size 11px
    .con
      display flex
      flex-direction column
      justify-content center
      align-items flex-start
      flex 1
      margin-left 20px
      .title
        margin-bottom 10px
        color #55545D
        font-size 18px
      .remark
        font-size 11px
        color #B9B7C0
    .right
      color #B9B7C0
      .iconfont
        font-size 11px
  .bottom
      position fixed
      bottom 0
      left 0
      right 0
      display flex
      height 40px
      background-color red
      color white
      .btn
        flex 1
        display flex
        justify-content center
        align-items center
        font-size 11px
  .set
    position absolute
    bottom 80px
    right 40px
    width 60px
    height 60px
    color white
    display flex
    align-items center
    justify-content center
    font-size 12px
    background-color red
    border-radius 50%

</style>
